<template>
    <div>
        <h2>添加房型</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td >房型名称</td>
          <td>
            <input type="text" v-model="form.name" />
          </td>
        </tr>
        <tr>
          <td>售价</td>
          <td>
            <input type="text" v-model="form.price" />
          </td>
        </tr>
        <tr>
          <td>房型面积</td>
          <td>
            <input type="text" v-model="form.mianji" />
          </td>
        </tr>
        <tr>
          <td>可住人数</td>
          <td>
            <input type="text" v-model="form.renshu" />
          </td>
        </tr>
        <tr>
          <td>房型图片</td>
          <td>
            <img :src="form.tupian" style="display: ''; max-width: 100px" />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td>房型介绍</td>
          <td>
            <textarea v-model="form.jieshao"> </textarea>
          </td>
        </tr>
        <tr>
          <td>可否加床</td>
          <td>
            <input type="radio" v-model="form.jiachuang" value="1" />可以加床
            <input type="radio" v-model="form.jiachuang" value="2" />不可以
          </td>
        </tr>
        <tr>
          <td>是否含早餐</td>
          <td>
            <input type="radio" v-model="form.hanzao" value="1" />含早餐
            <input type="radio" v-model="form.hanzao" value="2" />不含早餐
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button class="btn btn-primary" @click="Add">添加</button>
          </td>
        </tr>
      </tbody>
    </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import "bootstrap/dist/css/bootstrap.min.css"

const router=useRouter();
const form=reactive({
  id: 0,
  name: "",
  price: "",
  mianji: "",
  renshu: 0,
  tupian: "",
  jieshao: "",
  jiachuang: "",
  hanzao: "",
})

const Add=()=>{
    if(!form.name){
        alert("姓名不能为空");
        return;
    }

    axios.post("https://localhost:7015/api/fangxing/Addfang",form).then(res=>{
        if(res.data>0){
            alert("添加成功");
            router.push("showfang");
        }
        else{
            alert("添加失败");
            return;
        }
    })



}


const Tupian=(e:any)=>{
    var formData=new FormData();
    var file=e.target.files[0];
    formData.append("file",file);
    axios.post("https://localhost:7015/api/fangxing",formData).then(res=>{
        form.tupian=res.data;
    }).catch(err=>{
        console.log(err);
    })
}


</script>

<style scoped>

</style>